<template>
    <div id="cc-edit">
        <div style="position: sticky;top:0;z-index: 9999;background: #fff;">
            <div style="display: flex;flex-direction: row;height: 40px;">
                <div
                        style="display: flex;justify-content: center;align-items: center;width: 25vw;
                        font-family: PingFangSC-Regular;font-size: 14px;"
                        :style="{borderBottom:activeStep==index?'2px solid #454592':'1px solid #ddd',color:activeStep==index?'#454592':'#333'}"
                        v-for="(item,index) in ['基本','疾病','合病症','治疗']"
                        @click="privilegeHeadClick('edit-anchor-'+index)">
                    <span>
                      {{item}}
                    </span>
                </div>
            </div>
        </div>
        <div class="wrapper">
            <!--基本信息-->
            <div id="edit-anchor-0" class="privilege-wrap-edit">
                <!--标题-->
                <div class="title">
                    <div class="title_block"></div>
                    <div class="title_text">
                        基本信息
                    </div>
                </div>
                <!--field-->
                <div class="field_item">
                    <div class="field_title">
                        年龄
                    </div>
                    <div>
                        <Field v-model="form.tabBasic.B02" type="number" readonly/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        体重(kg)
                    </div>
                    <div>
                        <Field v-model="form.tabBasic.B04" type="number" readonly/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        身高(cm)
                    </div>
                    <div>
                        <Field v-model="form.tabBasic.B07" type="number" readonly/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        BMI(kg/m2)
                    </div>
                    <div>
                        <Field v-model="form.tabBasic.B05" type="number" readonly/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        性别
                    </div>
                    <div>
                        <Cell is-link :title="form.tabBasic.B03" />
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        病程（年）
                    </div>
                    <div>
                        <Cell is-link :title="form.tabBasic.B06" />
                    </div>
                </div>

            </div>
            <!--基本信息-->
            <!--疾病信息-->
            <div class="mt20 privilege-wrap-edit" id="edit-anchor-1">
                <!--标题-->
                <div class="title">
                    <div class="title_block"></div>
                    <div class="title_text">
                        疾病信息
                    </div>
                </div>
                <!--field-->
                <div class="field_item">
                    <div class="field_title">
                        空腹血糖（mmol/L）
                    </div>
                    <div>
                        <Field v-model="form.tabDisease.D01" type="number" readonly/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        餐后血糖（mmol/L）
                    </div>
                    <div>
                        <Field v-model="form.tabDisease.D02" type="number" readonly/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        糖化血红蛋白（%）
                    </div>
                    <div>
                        <Field v-model="form.tabDisease.D03" type="number" readonly/>
                    </div>
                </div>

            </div>
            <!--疾病信息-->
            <!--合并症信息-->
            <div class="mt20 privilege-wrap-edit" id="edit-anchor-2">
                <!--标题-->
                <div class="title">
                    <div class="title_block"></div>
                    <div class="title_text">
                        合并症信息
                    </div>
                </div>
                <!--field-->

                <div class="field_item">
                    <div class="field_title">
                        伴发疾病及既往史(多选)
                    </div>
                    <div>
                        <Cell is-link :title="form.tabComplication.C15.join(',')"/>
                    </div>
                </div>
                <div v-if="form.tabComplication.C15.includes('急性冠脉综合征')">
                    <div class="title_sub">
                        急性冠状脉综合症
                    </div>
                    <div class="field_item">
                        <div class="field_title">
                            目前状态
                        </div>
                        <div>
                            <Cell is-link :title="form.tabComplication.C07"/>
                        </div>
                    </div>
                    <div class="field_item" v-if="form.tabComplication.C07=='急性发作'">
                        <div class="field_title">
                            急性期治疗方案
                        </div>
                        <div>
                            <Cell is-link :title="form.tabComplication.C09"/>
                        </div>
                    </div>
                    <div class="field_item" v-if="form.tabComplication.C07=='急性发作'">
                        <div class="field_title">
                            心电图(多选)
                        </div>
                        <div>
                            <Cell is-link :title="form.tabComplication.C08.join(',')" />
                        </div>
                    </div>

                </div>
                <div v-if="form.tabComplication.C15.includes('高血压')">
                    <div class="title_sub">
                        高血压
                    </div>
                    <div class="field_item">
                        <div class="field_title">
                            舒张压(mmHg)
                        </div>
                        <div>
                            <Field v-model="form.tabComplication.C14" type="number" readonly/>
                        </div>
                    </div>
                    <div class="field_item">
                        <div class="field_title">
                            收缩压(mmHg)
                        </div>
                        <div>
                            <Field v-model="form.tabComplication.C13" type="number" readonly/>
                        </div>
                    </div>
                </div>


            </div>

            <!--治疗信息-->
            <div class="mt20 privilege-wrap-edit" id="edit-anchor-3">
                <!--标题-->
                <div class="title">
                    <div class="title_block"></div>
                    <div class="title_text">
                        治疗信息
                    </div>
                </div>
                <!--field-->

                <div class="field_item">
                    <div class="field_title">
                        上次治疗方案（可多选）
                    </div>
                    <div>
                        <Cell is-link :title="form.treatment.T09.join(',')" />
                    </div>
                </div>
                <div class="title_sub">
                    起始治疗方案
                </div>
                <div class="field_item">
                    <div class="field_title">
                        基础胰岛素（IU）+艾倍得
                    </div>
                    <div>
                        <Field v-model="form.treatment.Z01" readonly/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        早餐（IU）
                    </div>
                    <div>
                        <Field v-model="form.treatment.Z02" readonly/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        午餐（IU）
                    </div>
                    <div>
                        <Field v-model="form.treatment.Z03" readonly/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        晚餐（IU）
                    </div>
                    <div>
                        <Field v-model="form.treatment.Z04" readonly/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        基础胰岛素是否使用来得时
                    </div>
                    <div>
                        <Cell is-link :title="form.treatment.Z05"/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        艾倍得总量（IU）
                    </div>
                    <div>
                        <Field v-model="form.treatment.Z06" readonly/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        全天胰岛素总剂量（IU）
                    </div>
                    <div>
                        <Field v-model="form.treatment.Z07" readonly/>
                    </div>
                </div>

                <div class="title_sub">
                    当前治疗方案
                </div>
                <div class="field_item">
                    <div class="field_title">
                        基础胰岛素（IU）+艾倍得
                    </div>
                    <div>
                        <Field v-model="form.treatment.Z08" readonly/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        早餐（IU）
                    </div>
                    <div>
                        <Field v-model="form.treatment.Z09" readonly/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        午餐（IU）
                    </div>
                    <div>
                        <Field v-model="form.treatment.Z10" readonly/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        晚餐（IU）
                    </div>
                    <div>
                        <Field v-model="form.treatment.Z11" readonly/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        基础胰岛素是否使用来得时
                    </div>
                    <div>
                        <Cell is-link :title="form.treatment.Z12"/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        艾倍得总量（IU）
                    </div>
                    <div>
                        <Field v-model="form.treatment.Z13" readonly/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        全天胰岛素总剂量（IU）
                    </div>
                    <div>
                        <Field v-model="form.treatment.Z14" readonly/>
                    </div>
                </div>



                <div class="field_item">
                    <div class="field_title">
                        建议艾倍得用药时间（月）
                    </div>
                    <div>
                        <Cell is-link :title="form.treatment.T08"/>
                    </div>
                </div>

            </div>
            <!--治疗信息-->

        </div>
        <div>
            <img :src="cloud_img" style="width: 100%"/>
        </div>
    </div>

</template>

<script>
    import {
        Field,
        Cell,
        CellGroup,
        Popup,
        Picker,
        Toast,
        Overlay,
        Checkbox,
        CheckboxGroup
    } from 'vant';
    import RadioList from "@components/snfRadioList/index";
    import CheckboxList from "@components/snfCheckboxList/index";
    import cloud_img from '@assets/image/cloud.svg'
    const genderOptions = ['男', '女']
    const B06Options = ['新诊断或小于半年', '0.5-2（不包括2年）','2-5（不包括5年）','5-8（不包括8年）','≥8']
    const diseaseHistoryOptions = ['糖尿病', '高血压', '胃肠道出血史', '痛风史', '哮喘', '多血管床病变', '其它', '无']

    const T08Options = ['<1','1-3','3-6','3-6','>12']
    const C07Options = ['急性发作','既往史']
    const C09Options = ['PCI','非PCI']
    const C08Options = ['ST抬高','ST压低','T波倒置','病理性Q波','无明显变化']
    const T09Options = ['基础胰岛素','餐时胰岛素','预混胰岛素','胰岛素泵','口服降糖药','其他','未治疗']
    const Z05Options = ['是','否']
    const Z12Options = ['是','否']
    export default {
        name: "add",
        props: {
            editObject: Object,
            tabActive: Number
        },
        components: {
            CheckboxList,
            RadioList,
            Field,
            Cell,
            Popup,
            Picker,
            Toast,
            Overlay,
            Checkbox,
            CheckboxGroup,
            CellGroup
        },
        data() {
            return {
                activeStep: '',
                form: this.editObject,
                genderShow: false,
                B06Show: false,
                C07Show:false,
                C09Show:false,
                C08Show:false,
                T09Show:false,
                Z05Show:false,
                Z12Show:false,
                diseaseHistoryShow: false,
                T08Show : false,
                genderOptions: genderOptions,
                B06Options: B06Options,
                C07Options : C07Options,
                C09Options : C09Options,
                C08Options : C08Options,
                Z05Options:Z05Options,
                Z12Options:Z12Options,
                T09Options:T09Options,
                diseaseHistoryOptions: diseaseHistoryOptions,
                T08Options:T08Options,
                cloud_img:cloud_img
            }
        },
        methods: {
            T09confirm(value, index) {
                this.form.treatment.T09 = value
                this.T09Show = false
            },
            C08confirm(value, index) {
                this.form.tabComplication.C08 = value
                this.C08Show = false
            },

            diseaseHistoryconfirm(value, index) {
                this.form.tabComplication.C15 = value
                this.diseaseHistoryShow = false
            },
            onScroll(e) {
                let scrollItems = document.querySelectorAll(".privilege-wrap-edit");
                for (let i = scrollItems.length - 1; i >= 0; i--) {
                    // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
                    let judge =
                        e.target.scrollTop >=
                        scrollItems[i].offsetTop - scrollItems[0].offsetTop;
                    if (judge) {
                        this.activeStep = i;
                        this.active = this.activeStep
                        break;
                    }
                }
            },
            privilegeHeadClick(anchor, index) {
                this.$nextTick(() => {
                    document.querySelector(`#${anchor}`).scrollIntoView({
                        behavior: "smooth", // 平滑过渡
                        block: "start" // 上边框与视窗顶部平齐。默认值
                    });
                });
            },
            C08toggle(index){
                this.$refs.C08checkboxes[index].toggle();
            },
            T09toggle(index){
                this.$refs.T09checkboxes[index].toggle();
            },
            toggle(index) {
                this.$refs.checkboxes[index].toggle();
            },
            genderConfirm(value, index) {
                this.form.tabBasic.B03 = value
                this.genderShow = false
            },
            B06Confirm(value, index) {
                this.form.tabBasic.B06 = value
                this.B06Show = false
            },
            C07Confirm(value, index) {
                this.form.tabComplication.C07 = value
                this.C07Show = false
            },
            C09Confirm(value, index) {
                this.form.tabComplication.C09 = value
                this.C09Show = false
            },
            Z05Confirm(value,index){
                this.form.treatment.Z05 = value
                this.Z05Show = false
            },
            Z12Confirm(value,index){
                this.form.treatment.Z12 = value
                this.Z12Show = false
            },
            T08Confirm(value,index){
                this.form.treatment.T08 = value
                this.T08Show = false
            },
            saveCheck() {
                if (!this.form.tabBasic.B02) {
                    alert("请输入年龄！")
                    return false
                }
                if (!this.form.tabBasic.B03) {
                    alert("请选择性别！")
                    return false
                }
                if (!this.form.tabBasic.B04) {
                    alert("请输入体重！")
                    return false
                }
                if (!this.form.tabBasic.B05) {
                    alert("请输入BMI！")
                    return false
                }
                if (!this.form.tabBasic.B06) {
                    alert("请选择病程！")
                    return false
                }
                if (!this.form.tabBasic.B07) {
                    alert("请输入身高！")
                    return false
                }
                if (!this.form.tabDisease.D01) {
                    alert("请输入空腹血糖！")
                    return false
                }
                if (!this.form.tabDisease.D02) {
                    alert("请输入餐后血糖！")
                    return false
                }
                if (!this.form.tabDisease.D03) {
                    alert("请输入糖化血红蛋白！")
                    return false
                }
                if (this.form.tabComplication.C15.length < 1) {
                    alert("请选择伴发疾病及既往史！")
                    return false
                }
                if (this.form.tabComplication.C15.includes('急性冠脉综合征')) {
                    if (!this.form.tabComplication.C07) {
                        alert("请选择目前状态！")
                        return false
                    }
                }
                if (this.form.tabComplication.C15.includes('高血压')) {
                    if (!this.form.tabComplication.C13) {
                        alert("请输入收缩压！")
                        return false
                    }
                    if (!this.form.tabComplication.C14) {
                        alert("请输入舒张压！")
                        return false
                    }
                }
                if (this.form.tabComplication.C07 == '急性发作') {
                    if (this.form.tabComplication.C08.length < 1) {
                        alert("请选择心电图！")
                        return false
                    }
                    if (!this.form.tabComplication.C09) {
                        alert("请选择急性治疗方案！")
                        return false
                    }
                }
                if (this.form.treatment.T09.length < 1) {
                    alert("请选择上次治疗方案！")
                    return false
                }
                if (!this.form.treatment.T08) {
                    alert("请选择建议艾倍得用药时间！")
                    return false
                }
                if (!this.form.treatment.Z01) {
                    alert("基础胰岛素（IU）+艾倍得不能为空！")
                    return false
                }
                if (!this.form.treatment.Z02) {
                    alert("请输入早餐（IU）！")
                    return false
                }
                if (!this.form.treatment.Z03) {
                    alert("请输入午餐（IU）！")
                    return false
                }
                if (!this.form.treatment.Z04) {
                    alert("请输入晚餐（IU）！")
                    return false
                }
                if (!this.form.treatment.Z05) {
                    alert("请选择基础胰岛素是否使用来得时！")
                    return false
                }
                if (!this.form.treatment.Z06) {
                    alert("请输入艾倍得总量（IU）！")
                    return false
                }
                if (!this.form.treatment.Z07) {
                    alert("请输入全天胰岛素总剂量（IU）！")
                    return false
                }
                if (!this.form.treatment.Z08) {
                    alert("请输入基础胰岛素（IU）+艾倍得！")
                    return false
                }
                if (!this.form.treatment.Z09) {
                    alert("请输入早餐（IU）！")
                    return false
                }
                if (!this.form.treatment.Z10) {
                    alert("请输入餐（IU）！")
                    return false
                }
                if (!this.form.treatment.Z11) {
                    alert("请输入晚餐（IU）！")
                    return false
                }
                if (!this.form.treatment.Z12) {
                    alert("请选择基础胰岛素是否使用来得时！")
                    return false
                }
                if (!this.form.treatment.Z13) {
                    alert("请输入艾倍得总量（IU）！")
                    return false
                }
                if (!this.form.treatment.Z14) {
                    alert("请输入全天胰岛素总剂量（IU）！")
                    return false
                }

                return true
            },
            save() {
                this.form.finish = false
                this.$emit('save', Object.assign({}, this.form))
                this.$nextTick(() => {
                    document.querySelector(`#cc-edit`).scrollIntoView({
                        block: "start" // 上边框与视窗顶部平齐。默认值
                    });
                });
                this.$emit('hide')
            },
            submit(){
                this.form.finish = this.saveCheck()
                if(this.form.finish){
                    this.$emit('save', Object.assign({}, this.form))
                    this.$emit('hide')
                }else{
                    return
                }
                this.$nextTick(() => {
                    document.querySelector(`#cc-edit`).scrollIntoView({
                        block: "start" // 上边框与视窗顶部平齐。默认值
                    });
                });
            }
        },
        watch: {
            tabActive(newval, oldval) {
                console.log(newval)
                this.activeStep = newval
            },
            editObject(newval, oldval) {
                this.form = newval
            },
            'form.tabComplication.C15':{
                handler(newval,oldval){
                    if(!newval.includes('高血压')){
                        this.form.tabComplication.C13 = ''
                        this.form.tabComplication.C14 = ''
                    }
                    if(!newval.includes('急性冠脉综合征')){
                        this.form.tabComplication.C07 = ''
                    }
                },
                deep: true,
                immediate: true

            },
            'form.tabComplication.C07':{
                handler(newval,oldval){
                    if(newval != '急性发作'){
                        this.form.tabComplication.C08 = []
                        this.form.tabComplication.C09 =''
                    }
                },
                deep: true,
                immediate: true
            }
        }
    }
</script>

<style scoped>
    .wrapper {
        padding: 20px;
    }

    .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        /*margin-bottom: 10px;*/
    }

    .title_block {
        background: #ACB318;
        width: 4px;
        height: 20px;
    }

    .title_text {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #333333;
        letter-spacing: 0.3px;
        text-align: justify;
        line-height: 24px;
        margin-left: 12px;
    }

    .field_title {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #999999;
        letter-spacing: 0.22px;
        text-align: justify;
        line-height: 16px;
    }

    .field_item {
        margin-top: 10px;
    }

    .title_sub {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #454592;
        letter-spacing: 0.26px;
        text-align: justify;
        margin-top: 20px;
    }

    .submit {
        width: 100%;
        height: 48px;
        display: flex;
        justify-content: center;
        margin-top: 50px;
        margin-bottom: 20px;
    }

    .submit_btn {
        width: 90%;
        height: 48px;
        background: #ACB318;
        border-radius: 2px;
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }
    .submit_btn2{
        width: 90%;
        height: 48px;
        background: #454592;
        border-radius: 2px;
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        margin: 0 auto;
    }

    .mt20 {
        margin-top: 20px;
    }

    .van-cell {
        padding: 10px 0px !important;
        border-bottom: 1px solid #ddd;
    }
</style>